<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters for drawing
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = 35;
        const spacing = 150;
        const numCharges = 4;
        const startX = centerX - (spacing * (numCharges - 1)) / 2;

        // Styling
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        
        // Function to draw a plus sign
        function drawPlus(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x, y - size / 2);
            ctx.lineTo(x, y + size / 2);
            ctx.moveTo(x - size / 2, y);
            ctx.lineTo(x + size / 2, y);
            ctx.stroke();
        }

        // Function to draw a minus sign
        function drawMinus(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x - size / 2, y);
            ctx.lineTo(x + size / 2, y);
            ctx.stroke();
        }

        // Draw the chain of charges
        for (let i = 0; i < numCharges; i++) {
            const currentX = startX + i * spacing;

            // Draw the circle for the charge
            ctx.beginPath();
            ctx.arc(currentX, centerY, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // Set font for labels 'a' and 'e'
            ctx.font = 'italic 30px Times New Roman';
            
            // Draw alternating signs and charge labels
            if (i % 2 === 0) {
                // Positive charge
                drawPlus(currentX, centerY, radius * 0.8);
                ctx.textBaseline = 'top';
                ctx.fillText('e', currentX, centerY + radius + 15);
            } else {
                // Negative charge
                drawMinus(currentX, centerY, radius * 0.8);
                ctx.textBaseline = 'top';
                // Using the proper minus sign (U+2212)
                ctx.fillText('−e', currentX, centerY + radius + 15);
            }

            // Draw distance label 'a' between charges
            if (i < numCharges - 1) {
                ctx.textBaseline = 'bottom';
                ctx.fillText('a', currentX + spacing / 2, centerY - radius - 15);
            }
        }
        
        // Draw ellipses to indicate the infinite chain
        ctx.font = '40px Times New Roman';
        ctx.textBaseline = 'middle';
        const ellipsisOffsetX = spacing * 0.6;
        ctx.fillText('...', startX - ellipsisOffsetX, centerY);
        ctx.fillText('...', startX + (numCharges - 1) * spacing + ellipsisOffsetX, centerY);

    </script>
</body>
</html>